<template>
    <div id="my-swiper">
        <ul :style="{
            width: banners.length*100 + '%',
            left: left,
            transition: transition
        }">
            <li v-for="(item, i) in banners" :key="i" :style="liStyle"
                @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"
            >
                <img :src="item.picUrl" alt="">
            </li>
        </ul>
    </div>
</template>

<script>
var setInt
export default {
    name: '',
    props: {
        banners: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    data() { 
        return {
            liStyle:{
                width: '100%'
            },
            left: '-100%',
            transition: 'none',
            direction: 'left',
            startX: 0
        }
    },
    created() {
        setInt = setInterval(() => {
            this.touchEnd()
        }, 3000);
    },
    methods:{
        touchStart(e) {
            // 记录触摸初始位置
            this.startX = e.touches[0].pageX
            clearInterval(setInt)
        },

        touchMove(e) {
            let moveX = e.touches[0].pageX
            if(moveX - this.startX > 0) {
                this.direction = 'right'
            } else if(moveX - this.startX < 0) {
                 this.direction = 'left'
            }
        },

        touchEnd() {
            let timer
            this.transition = "left .5s linear"
            if(this.direction == 'left') {
                clearTimeout(timer)
                this.left = '-200%'
                timer = setTimeout(() => {
                    let item = this.banners.shift()
                    this.banners.push(item)
                    this.transition = "none"
                    this.left = '-100%'
                }, 500);
            } else if(this.direction == "right") {
                clearTimeout(timer)
                this.left = '0%'
                timer = setTimeout(() => {
                    let item = this.banners.pop()
                    this.banners.unshift(item)
                    this.transition = "none"
                    this.left = '-100%'
                }, 500);
            }
           
        },

        autoPlay() {
            let timer
            clearTimeout(timer)
            this.transition = "left .5s linear"
            this.left = '-200%'
            timer = setTimeout(() => {
                let item = this.banners.shift()
                this.banners.push(item)
                this.transition = "none"
                this.left = '-100%'
            }, 500)
        }

    },

    watch: {
        banners(to) {
            // console.log(to)
            this.liStyle.width = 100 / this.banners.length + '%'
            
        }
    }
}
</script>

<style scoped lang="scss">
    #my-swiper{
        width: 100%;
        ul{
            position: relative;
        }
        li{
            float: left;
            overflow: hidden;
            
        }
    }
</style>